﻿<template>
    <div class="com-cnt">
        <!-- <video style="width:100%;" id="myvideo" :poster="videoImg" :src="videoSrc" :muted="muteStatus" controls="controls" preload="preload" webkit-playsinline x5-playsinline playsinline></video> -->
        <h2 class="title border-bottom">新型模式“候鸟式养老”爆红</h2>
        <div class="pic-cnt">
            <img v-for="(item, index) in imgs" :key="index" class="item-pic" :src="item" alt="">
        </div>
        <div @click="applyDo" class="btn-fix">立即咨询</div>
    </div>
</template>

<script>
import axios from 'axios'
import Qs from 'qs'
import { maskCallback, maskTips } from '@/assets/js/dom'
export default {
    name: "oldPage",
    data() {
        return {
            userid: (function () {
                return localStorage.getItem('userid') ? localStorage.getItem('userid') : ''
            })(),
            imgs: [require('@/assets/imgs/old_1.jpg'), require('@/assets/imgs/old_2.jpg'), require('@/assets/imgs/old_3.jpg')],
            _dom: "",
            videoSrc: 'https://out-4f5fadab5fc011e8b60a00163e1c955c.oss-cn-shanghai.aliyuncs.com/video/da07570-164d9a865ea-0005-8413-40d-8e3e0.mp4?Expires=1532672705&OSSAccessKeyId=LTAInFumgYEtNMvC&Signature=CVeVBT99gH51a4O02wF5WlcStFE%3D',
            videoImg: '../../assets/imgs/xkh.png',
            muteStatus: '',
            isMute: true,
            isPlay: false,
        }

    },
    mounted() {
        let self = this
        maskCallback(function () {
            self.$router.push('/center?source=1')
        }, 'comp-mask-btnAleft-old', 'comp-mask-btnAright')
        maskCallback(function () {
            self.$router.push('/')
        }, 'comp-mask-btnAleft-suc')
    },
    methods: {
        applyDo() {
            let self = this
            var userToken = localStorage.getItem("token") || '' //用户token值         
            axios({
                url: '/xshk/f/active/user/add?token=' + userToken,
                method: 'post',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                data: Qs.stringify({
                    'type': 2,
                    'userid': self.userid
                })
            }).then(res => { self.handleGetDataSucc(res) }).catch(err => { self.handleGetDataFail(err) })
        },
        handleGetDataSucc(res) {
            res = res.data
            if (res && res.code == 0) {
                maskTips({ id: "axios-tips-suc", title: '温馨提示', btnCls: 'comp-mask-btnAleft-suc', btnTxt: '确认', txt: '稍后工作人员将与您电话联系，请您保持电话畅通！' })
            } else {
                //未登录                 
                maskTips({ id: "axios-tips-fail_" + new Date().getTime(), title: '温馨提示', btnCls: 'comp-mask-btnAleft-old', btnTxt: '确认', btnTxt2: '取消', txt: res.message })
            }
        },
        handleGetDataFail(err) {
            console(err)
            maskTips({ id: "axios-tips-fail", txt: '网络通信失败!' })
        },
        // 视频方法
        playClick() {
            this._dom = document.getElementById('myvideo');
            this.isPlay = !this.isPlay;
            this._dom.play();
        },
        showOtherVideo() {
            let _this = this;
            setTimeout(function () {
                _this.flag = _this._dom.paused;
                if (!_this.flag) {
                    _this.showOtherVideo();
                    console.log(_this.flag);
                }

            }, 1000)
        }
    }
}
</script>

<style lang="stylus" scoped>
.com-cnt {
    width: 100%;
    height: auto;
    padding-bottom: 45px;
    overflow: hidden;

    .title {
        width: 100%;
        height: 50px;
        line-height: 50px;
        box-sizing: border-box;
        padding: 0 10px;
        font-weight: bold;
        font-size: 20px;
        color: #333;
        text-align: center;
    }

    .border-bottom {
        &:before {
            bottom: 1px;
        }
    }

    .pic-cnt {
        width: 100%;
        height: auto;
        overflow: hidden;

        .item-pic {
            width: 100%;
            height: auto;
            display: block;
            float: left;
        }
    }

    .btn-fix {
        width: 100%;
        height: 45px;
        line-height: 45px;
        text-align: center;
        font-size: 16px;
        color: #fff;
        background-color: #aad114;
        position: fixed;
        left: 0;
        bottom: 45px;
    }
}
</style>